<template>
  <div class="order app-container">
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="form-group">
            <el-input v-model="params.search"
                      placeholder="请输入关键词"
                      clearable
                      size="default"
                      @keyup.enter="handleQuery">
            </el-input>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="form-group">
            <el-select v-model="params.status" placeholder="请选择订单状态" clearable size="default">
              <el-option v-for="(value, key) in statusData" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <el-button size="default" type="primary" icon="Search" @click="handleQuery">查询</el-button>
          <el-button size="default" @click="handleResetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div class="order-list">
        <div class="row order-bg">
          <div class="cell" style="width: 500px">商品</div>
<!--          <div class="cell">单件(元)/数量</div>-->
          <div class="cell">所属商户</div>
          <div class="cell">付费方式/配送方式</div>
          <div class="cell">小计/运费/应付款</div>
          <div class="cell" style="text-align: center;">订单状态</div>
          <div class="cell" style="text-align: center;">操作</div>
        </div>

        <div class="order-item" v-for="item in pageData" :key="item.id">
          <div class="order-item-top">
            <div class="order-top-info">订单编号：{{ item.code }}</div>
            <div class="order-top-info">下单时间：{{ item.created_at }}</div>
          </div>
          <div class="order-item-content">
            <div class="order-item-td" style="width: 500px;">
              <div class="order-line" v-for="line in item.lines" :key="line.id">
                <img class="order-line-pic" v-if="line.product" :src="line.product.image_url" alt="">
                <div>
                  <div class="order-line-name" @click="jumpGoodsDetail(line.product.id)">{{ line.product?.name || line.name }}</div>
                  <div style="line-height: 16px;">单价：￥{{ line.unit_price }}/{{line.uom.name}}</div>
                  <div style="line-height: 16px;">数量：x{{ line.quantity }}</div>
                </div>
              </div>
            </div>
<!--            <div class="order-item-td">-->
<!--              <div v-for="line in item.lines" :key="line.id">-->
<!--                <div class="order-info">单位：{{ line.uom.name }}</div>-->
<!--                <div class="order-info">单价：￥{{ line.unit_price }}</div>-->
<!--              </div>-->
<!--            </div>-->
            <div class="order-item-td">
              <div class="order-info">ID：{{ item.merchant?.id || ''}}</div>
              <div class="order-info">名称：{{ item.merchant?.name || ''}}</div>
            </div>
            <div class="order-item-td">
              <div class="order-info">微信支付</div>
              <div class="order-info">快递</div>
            </div>
            <div class="order-item-td">
              <div class="order-info">小计：￥{{ item.total_price }}</div>
              <div class="order-info">运费：￥{{ item.express_amount }}</div>
              <div class="order-info">应付款：￥{{ item.total_price }}</div>
            </div>
            <div class="order-item-td" style="text-align: center;">
              {{ statusData[item.status] }}
            </div>
            <div class="order-item-td">
              <a href="javascript:void(0);" class="btn-item" @click="onOrderDetail(item.id, 'detail')">订单详情</a>
              <a href="javascript:void(0);" class="btn-item" @click="onOrderDetail(item.id, 'express')"
                 v-if="item.status == 'paid'">确定发货</a>
              <a href="javascript:void(0);" class="btn-item"
                 v-if="item.status != 'pending' && item.status != 'canceled'">全额退款</a>
            </div>
          </div>
          <!--          <div class="order-item-bottom">-->
          <!--            <div class="order-bottom-info">{{ item.customer_name }}</div>-->
          <!--            <div class="order-bottom-info">{{ item.  }}</div>-->
          <!--            <div class="order-bottom-info">{{ item.customer_address }}</div>-->
          <!--          </div>-->
        </div>
      </div>
      <el-empty v-if="pageData.length <= 0" description="暂无订单数据"/>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="params.page"
        v-model:limit="params.size"
        @pagination="handleQuery"
      />
    </el-card>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      :width="dialogType == 'detail' ? '40vw' : 500"
      :before-close="handleClose">
      <div class="dialog-box">
        <div class="deliver-box" v-if="orderDetail && orderDetail.deliver">
          <div class="title-box">收货地址</div>
          <div class="deliver-info">
            <div class="deliver-city">{{ orderDetail.deliver.province }} {{ orderDetail.deliver.city }}
              {{ orderDetail.deliver.district }}
            </div>
            <div class="deliver-address">{{ orderDetail.deliver.address }}</div>
            <div class="deliver-user">{{ orderDetail.deliver.name }} {{ orderDetail.deliver.phone }}</div>
          </div>
        </div>
        <div v-if="dialogType == 'detail'">
          <div class="order-lines" v-if="orderDetail.lines">
            <div class="title-box">订单明细</div>
            <div class="line-item" v-for="line in orderDetail.lines" :key="line.id">
              <img class="line-pic" :src="line.product.image_url" :alt="line.product.name">
              <div class="line-item-right">
                <p class="line-name">{{ line.product.name }}</p>
                <p class="line-qty">x {{ line.quantity }}/{{ line.product.uom.name }}</p>
                <p class="line-price">￥{{ line.subtotal_stand_price }}</p>
              </div>
            </div>
          </div>
          <div class="order-info" v-if="orderDetail.express">
            <div class="title-box">快递信息</div>
            <div class="info-item">
              <div class="info-key">快递公司：</div>
              <div class="info-val">{{ orderDetail.express.name }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">快递单号：</div>
              <div class="info-val">{{ orderDetail.express.code }}</div>
            </div>
          </div>
          <div class="order-info" v-if="orderDetail.merchant">
            <div class="title-box">商户客户</div>
            <div class="info-item">
              <div class="info-key">商户名称：</div>
              <div class="info-val">{{ orderDetail.merchant.name }}</div>
            </div>
          </div>
          <div class="order-info">
            <div class="title-box">订单信息</div>

            <div class="info-item">
              <div class="info-key">订单编号：</div>
              <div class="info-val">{{ orderDetail.code }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">订单日期：</div>
              <div class="info-val">{{ orderDetail.created_at }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">订单状态：</div>
              <div class="info-val">{{ statusData[orderDetail.status] }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">快递费用：</div>
              <div class="info-val">￥{{ orderDetail.express_amount }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">小计：</div>
              <div class="info-val price">￥{{ orderDetail.total_stand_price }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">总计：</div>
              <div class="info-val price">￥{{ orderDetail.total_price }}</div>
            </div>
          </div>
        </div>
        <div class="form-main" v-if="dialogType == 'express'">
          <div class="form-item">
            <div class="form-item-key">快递公司:</div>
            <el-select size="large" v-model="expressForm.express_id" placeholder="请选择快递公司">
              <el-option v-for="item in expressCompany" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="form-item">
            <div class="form-item-key">快递单号:</div>
            <el-input size="large" v-model="expressForm.code" placeholder="请输入快递单号"></el-input>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button v-if="dialogType == 'express'" type="primary" @click="onOrderExpress">发货</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Order",
  inheritAttrs: false,
});
import OrderAPI, {orderPageQuery} from "@/api/order/order"
import {useUserStore} from "@/store";
import {useRouter} from "vue-router";

const router = useRouter();
const userStore = useUserStore();

const statusData = ref({
  'pending': '待支付',
  'paid': '已支付',
  'express': '已发货',
  'completed': '已完成',
  'canceled': '已取消'
})
const dialogType = ref('');
const dialogTitle = ref('');
const dialogVisible = ref(false);
const order_id = ref(0);
const orderDetail = ref({});
const loading = ref(false);
const pageData = ref([]);
const total = ref(0);
const params = reactive<orderPageQuery>({
  status: "",
  merchant: "",
  search: "",
  page: 1,
  size: 10
});
const expressCompany = ref([]);
const expressForm = ref({
  code: "",
  express_id: ""
});


function handleClose() {
  dialogType.value = "";
  dialogTitle.value = "";
  dialogVisible.value = false;
}

function getExpressCompany() {
  OrderAPI.getExpressCompanies({search: ''}).then(res => {
    expressCompany.value = res;
  })
}

function onOrderDetail(id: Number, type: String) {
  order_id.value = id;
  OrderAPI.getSalesSupplier(id).then((res: any) => {
    dialogType.value = type;
    dialogTitle.value = type == 'detail' ? "订单详情" : "订单发货";
    orderDetail.value = res;
    dialogVisible.value = true;
  })
}

function jumpGoodsDetail(id: number){
  if(!id) return;
  router.push('/goods/add?id='+id);
}

function onOrderExpress() {
  if (!expressForm.value.express_id) {
    return ElMessage.info("请选择快递公司")
  }
  if (!expressForm.value.code) {
    return ElMessage.info("请输入快递单号")
  }
  OrderAPI.orderSalesExpress(order_id.value, expressForm.value).then((res: any) => {
    if (res) {
      ElMessage.success("发货成功");
      handleClose();
      handleQuery();
    }
  })
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  OrderAPI.getPage(params)
    .then((data: any) => {
      pageData.value = data.records;
      total.value = data.total_page;
      loading.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
}


function handleResetQuery() {
  params.status = "";
  params.merchant = "";
  params.search = "";
  params.page = 1;
  params.size = 10;
  handleQuery();
}

onMounted(() => {
  if (userStore.isSupplier) {
    handleQuery();
    getExpressCompany();
  } else {
    ElMessageBox.alert('您当前尚未认证供应商身份，快去认证吧~', '认证提示', {
      confirmButtonText: '去认证',
      callback: (action: Action) => {
        if (action == 'confirm') {
          router.push({name: "Profile"});
        }
      },
    })
  }
})
</script>

<style scoped lang="scss">
.order {
  .box-card {
    margin-bottom: 10px;

    .form-group {
      //box-sizing: border-box;
      //width: 100%;
      //height: 32px;
      //border: 1px solid #dcdfe6;
      //border-radius: 4px;
      //display: flex;
      //align-items: center;
      margin-bottom: 10px;

      .form-key {
        border-radius: 4px 0 0 4px;
        height: 30px;
        width: 120px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #606266;
        background-color: #f5f7fa;
      }

      .form-price {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price-input {
          text-align: center;
          width: 40%;
          height: 30px;
          flex: 1;
          border: none;
          outline: none;
          box-shadow: none;
          -webkit-appearance: none;
          border-radius: 0 4px 4px 0;
        }
      }
    }

    .order-list {

      .row {
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 10px;
        font-weight: bold;
        border: 1px solid #dcdfe6;

        &.order-bg {
          background-color: #f5f7fa;
        }

        .cell {
          width: calc(100% / 7);
        }
      }

      .order-item {
        border: 1px solid #dcdfe6;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 10px;

        .order-item-top {
          padding: 10px;
          display: flex;
          align-items: center;
          background-color: #f5f7fa;
          border-bottom: 1px solid #dcdfe6;

          .order-top-info {
            font-weight: bold;
            margin-right: 20px;
          }
        }

        .order-item-content {
          display: flex;
          align-items: center;

          .order-item-td {
            width: calc(100% / 7);
            box-sizing: border-box;
            padding: 10px;

            .order-info {
              font-size: 13px;
              margin-bottom: 10px;
            }

            .order-line {
              display: flex;
              align-items: center;

              .order-line-pic {
                width: 80px;
                height: 80px;
                border-radius: 10px;
                margin-right: 10px;
              }

              .order-line-name {
                color: blue;
                line-height: 18px;
                cursor: pointer;
              }
            }

            .btn-item {
              text-align: center;
              display: block;
              padding: 5px 0;
              color: blue;
            }
          }
        }

        .order-item-bottom {
          padding: 10px;
          display: flex;
          align-items: center;
          border-top: 1px solid #dcdfe6;

          .order-bottom-info {
            margin-right: 20px;
          }
        }
      }
    }
  }


  .dialog-box {
    .title-box {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .deliver-box {
      margin-bottom: 20px;

      .deliver-info {
        padding: 5px 15px;
        border: 2px dashed #dddddd;
        border-radius: 6px;

        div {
          font-size: 13px;
        }
      }
    }

    .order-lines {
      margin-bottom: 10px;

      .line-item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;

        .line-pic {
          width: 80px;
          height: 80px;
          border-radius: 5px;
        }

        .line-item-right {
          margin-left: 10px;

          .line-name {
            font-weight: bold;
          }

          .line-price {
            font-weight: bold;
            color: #ff0000;
          }

          p {
            margin: 0;
          }
        }
      }
    }

    .order-info {
      margin-bottom: 10px;

      .info-item {
        display: flex;
        align-items: center;

        .info-key {
        }

        .info-val {

          &.price {
            font-weight: bold;
            color: #ff0000;
          }
        }
      }
    }

    .form-main {

      .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .form-item-key {
          width: 100px;
        }
      }
    }
  }
}
</style>
